<template>
  <el-card class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="美工工作量汇总统计" name="store">
        <el-row :gutter="50" type="flex" style="margin-top: 0px">
          <el-col :span="24">
            <div>
              <el-form size="mini" inline>
                <!--                <el-form-item>-->
                <!--                  <el-select v-model="formData.dateRange4Store.storeId" clearable placeholder="请选择店铺" filterable>-->
                <!--                    <el-option v-for="store in storeList" :key="store.value" :value="store.value" :label="store.label"/>-->
                <!--                  </el-select>-->
                <!--                </el-form-item>-->
                <el-form-item>
                  <el-date-picker
                    v-model="formData.dateRange4Store.dateRange"
                    type="daterange"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    style="width: 250px"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button @click="loadRevocationRateByStore" type="primary">搜索</el-button>
                  <el-button @click="exportRevocationRateByStore" type="danger">导出</el-button>
                </el-form-item>
              </el-form>
              <div class="data-table">
                <table v-loading="revocationRateByStoreLoading" style="width: auto">
                  <thead>
                  <tr>
                    <th style="min-width: 100px" rowspan="2">
                      美工姓名
                    </th>
                    <th width="90px" rowspan="2">
                      除同款工作量
                    </th>
                    <th width="90px" rowspan="2">
                      首次同款工作量
                    </th>
                    <th width="90px" rowspan="2">
                      同款工作量
                    </th>
                    <th width="110px" rowspan="2">
                      总工作量
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,itemIndex) in revocationRateByStore" :key="itemIndex">
                    <td align="center">
                      {{ item.name }}
                    </td>
                    <td align="center">
                      {{ item.notSameCnt }}
                    </td>
                    <td align="center">
                      {{ item.firstSameCnt }}
                    </td>
                    <td align="center">
                      {{ item.sameCnt }}
                    </td>
                    <td align="center">
                      {{ item.cnt }}
                    </td>
                  </tr>
                  </tbody>
                </table>
                <el-empty v-if="!revocationRateByStore.length && !revocationRateByStoreLoading">

                </el-empty>

              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="美工工作量每日统计" name="daily">
        <el-row :gutter="50" type="flex" style="margin-top: 0px">
          <el-col :span="24">
            <div>
              <el-form size="mini" inline>
                <!--                <el-form-item>-->
                <!--                  <el-select v-model="formData.dateRange4Store.storeId" clearable placeholder="请选择店铺" filterable>-->
                <!--                    <el-option v-for="store in storeList" :key="store.value" :value="store.value" :label="store.label"/>-->
                <!--                  </el-select>-->
                <!--                </el-form-item>-->
                <el-form-item>
                  <el-date-picker
                    v-model="formData.dateRange4Follower.dateRange"
                    type="daterange"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    style="width: 250px"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button @click="loadRevocationRateByFollower" type="primary">搜索</el-button>
                  <el-button @click="exportRevocationRateByFollower" type="danger">导出</el-button>
                </el-form-item>
              </el-form>
              <div class="data-table">
                <table v-loading="revocationRateByFollowerLoading" style="width: auto">
                  <thead>
                  <tr>
                    <th style="min-width: 100px" rowspan="2">
                      领取日期
                    </th>
                    <th style="min-width: 100px" rowspan="2">
                      美工姓名
                    </th>
                    <th width="90px" rowspan="2">
                      除同款工作量
                    </th>
                    <th width="90px" rowspan="2">
                      首次同款工作量
                    </th>
                    <th width="90px" rowspan="2">
                      同款工作量
                    </th>
                    <th width="110px" rowspan="2">
                      总工作量
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,itemIndex) in revocationRateByFollower" :key="itemIndex">

                    <td align="center">
                      {{ item.gmtDate }}
                    </td>
                    <td align="center">
                      {{ item.name }}
                    </td>
                    <td align="center">
                      {{ item.notSameCnt }}
                    </td>
                    <td align="center">
                      {{ item.firstSameCnt }}
                    </td>
                    <td align="center">
                      {{ item.sameCnt }}
                    </td>
                    <td align="center">
                      {{ item.cnt }}
                    </td>
                  </tr>
                  </tbody>
                </table>
                <el-empty v-if="!revocationRateByFollower.length && !revocationRateByFollowerLoading">

                </el-empty>

              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <loading-dialog v-model="isExporting" loading-text="正在导出，请稍等"/>
  </el-card>
</template>

<script>
import { voteBadCommentApi } from '@/feature/cmt/infra/api/voteBadCommentApi'
import LineChart from '@/components/chart/LineChart'
import RaddarChart from '@/components/chart/RaddarChart'
import PieChart from '@/components/chart/PieChart'
import BarChart from '@/components/chart/BarChart'
import Chart from '@/components/chart/Chart'
import ObjectUtil from '@/framework/infra/object/ObjectUtil'
import ColumnUtil from '@/framework/components/table/ColumnUtil'
import ExcelUtil from '@/framework/infra/excel/ExcelUtil'
import LoadingDialog from '@/framework/components/dialog/LoadingDialog'
import { storeApi } from '@/feature/mct/infra/api/storeApi'
import { adminApi } from '@/feature/mgr/infra/api/adminApi'
import moment from 'moment'
import { newProductRegisterApi } from '@/feature/pdt/infra/api/newProductRegisterApi'
import { dicApi } from '@/feature/sys/infra/api/dicApi'
import SysDicTypeEnum from '@/feature/sys/infra/constants/SysDicTypeEnum'

export default {
  components: { LoadingDialog, Chart, BarChart, PieChart, RaddarChart, LineChart },
  created() {

    // this.loadStoreList()
    // this.loadUserList()
    Promise.all([dicApi.allOptions(SysDicTypeEnum.STYLE.id).then(data => {
      data.push({
        value: '',
        label: '其他'
      })
      this.styleList = data
    }), dicApi.allOptions(SysDicTypeEnum.CHANNEL.id).then(data => {
      data.push({
        value: '',
        label: '其他'
      })
      this.channelList = data
    })]).then(() => {
      this.loadRevocationRateByStore()
    })

  },
  filters: {
    percentFormat(v) {
      return v.toFixed(2)
    }
  },
  watch: {
    activeName() {
      if (this.activeName === 'store') {
        this.loadRevocationRateByStore()
      } else {
        this.loadRevocationRateByFollower()
      }
    }
  },
  computed: {
    storeBackoutTotalNumOption() {
      return this.storePicOption('店铺差评汇总', this.revocationRateByStore, 'totalNum')
    },
    storeBackoutBadNumOption() {
      return this.storePicOption('店铺差评成立汇总', this.revocationRateByStore, 'badNum', '', 10)
    },
    storeBackoutNumOption() {
      return this.storePicOption('店铺差评撤销汇总', this.revocationRateByStore, 'backOutNum', '')
    },
    storePayoutAmountOption() {
      return this.storePicOption('店铺差评赔付金额汇总', this.revocationRateByStore, 'payOutAmount', '')
    },
    storeBackoutPercentOption() {
      return this.storePicOption('店铺差评撤销率', this.revocationRateByStore, 'backOutNumPercent', '%', 100)
    },
    storePayOutAmountPercentOption() {
      return this.storePicOption('店铺差评赔付金额占比', this.revocationRateByStore, 'payOutAmountPercent', '%', 100)
    },
    followerBackOutNumOption() {
      return this.storePicOption('差评撤销汇总', this.revocationRateByFollower, 'backOutNum', '')
    },
    followerBadNumOption() {
      return this.storePicOption('差评成立汇总', this.revocationRateByFollower, 'badNum', '')
    },
    followerPayOutAmountOption() {
      return this.storePicOption('差评赔付金额汇总', this.revocationRateByFollower, 'payOutAmount', '')
    },
    followerAvePayoutAmountOption() {
      return this.storePicOption('差评赔付平均金额', this.revocationRateByFollower, 'avePayOutAmount', '')
    },
    followerBackOutNumOwnerPercentOption() {
      return this.storePicOption('差评撤销占比', this.revocationRateByFollower, 'backOutNumOwnerPercent', '%', 100)
    },
    followerPayOutAmountOwnerPercentOption() {
      return this.storePicOption('差评赔付金额占比', this.revocationRateByFollower, 'payOutAmountOwnerPercent', '%', 100)
    }
  },
  data() {
    return {
      activeName: 'store',
      isExporting: false,
      storeList: [],
      userList: [],
      styleList: [],
      channelList: [],
      formData: {
        dateRange4Store: {
          storeId: '',
          userId: '',
          dateRange: [
            // moment().add('month', -1).startOf('month').format('YYYY-MM-DD'),
            // moment().startOf('month').format('YYYY-MM-DD'),
            moment().add('month', -1).startOf('month').format('YYYY-MM-DD'),
            moment().add('month', -1).endOf('month').format('YYYY-MM-DD')
          ]
        },
        dateRange4Follower: {
          storeId: '',
          userId: '',
          dateRange: [
            // moment().add('month', -1).startOf('month').format('YYYY-MM-DD'),
            moment().add('month', -1).startOf('month').format('YYYY-MM-DD'),
            moment().add('month', -1).endOf('month').format('YYYY-MM-DD')
          ]
        }
      },
      totalRevocationRate: 0,
      revocationRateByStoreLoading: false,
      revocationRateByFollowerLoading: false,
      revocationRateByStore: [],
      revocationRateByFollower: []
      // ,
      // lineChartData: {
      //   expectedData: [100, 120, 161, 134, 105, 160, 165],
      //   actualData: [120, 82, 91, 154, 162, 140, 145]
      // }
    }
  },

  methods: {
    storePicOption(title, data, field, unit = '', max = null) {
      return {
        backgroundColor: '#ffffff',
        // color: {
        //   type: 'linear',
        //   x: 0,
        //   y: 0,
        //   x2: 0,
        //   y2: 1,
        //   colorStops: [{
        //     offset: 0, color: 'red' // 0% 处的颜色
        //   }, {
        //     offset: 1, color: 'blue' // 100% 处的颜色
        //   }],
        //   global: false // 缺省为 false
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {backgroundColor: '#ffffff'}
        //   }
        // },
        // title: {
        //   text: title
        // },
        // toolbox: {feature: {saveAsImage: {backgroundColor: '#000000'}}},
        title: {
          text: title,
          // subtext: 'Fake Data',
          left: 'center'
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        // legend: {
        //   data: ['撤销率']
        // },
        tooltip: {
          trigger: 'item',
          // trigger: 'axis',
          formatter: param => {
            // console.log(params)
            // const param = params[0]
            return param.name.replace(param.value + unit, '') + ' ' + param.marker + param.value + unit
          }
          // axisPointer: { // 坐标轴指示器，坐标轴触发有效
          //   type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        // xAxis: {
        //   type: 'category',
        //   axisTick: {
        //     alignWithLabel: true
        //   },
        //   data: data.filter(el => el.storeTitle !== '汇总' && el.followerName !== '汇总').map(el => el.storeTitle || el.followerName)
        // },
        // yAxis: {
        //   type: 'value',
        //   max,
        //   // max: 100,
        //   axisTick: {
        //     show: false
        //   },
        //   axisLabel: {
        //     formatter: '{value}' + unit
        //   }
        // },
        series: [
          // {
          //   data: data.filter(el => el.storeTitle !== '汇总' && el.followerName !== '汇总').map(el => el[field]),
          //   barWidth: '20%',
          //   type: 'bar',
          //   name: title,
          //   showBackground: true,
          //
          //   backgroundStyle: {
          //     color: 'rgba(180, 180, 180, 0.2)'
          //   }
          // }
          {
            // name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: data.filter(el => el.storeTitle !== '汇总' && el.followerName !== '汇总').map(el => ({
              value: el[field],
              name: (el.storeTitle || el.followerName) + ' ' + el[field] + unit
            })),
            // data: [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            //   { value: 300, name: 'Video Ads' }
            // ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    loadStoreList() {
      storeApi.options().then(data => {
        this.storeList = data
      })
    },
    loadUserList() {
      adminApi.listAll().then(data => {
        this.userList = data
      })
    },
    // loadTotalRevocationRate() {
    //   voteBadCommentApi.queryTotalRevocationRate().then(data => {
    //     this.totalRevocationRate = data * 100
    //   })
    // },

    loadRevocationRateByStore() {
      this.revocationRateByStoreLoading = true
      newProductRegisterApi.queryArtDesignerWorkCountStatics(this.formData.dateRange4Store.dateRange[0], this.formData.dateRange4Store.dateRange[1]).then(data => {
        this.revocationRateByStore = data
      }).finally(() => {
        this.revocationRateByStoreLoading = false
      })
    },
    exportRevocationRateByStore() {
      this.isExporting = true
      newProductRegisterApi.queryArtDesignerWorkCountStatics(this.formData.dateRange4Store.dateRange[0], this.formData.dateRange4Store.dateRange[1]).then(data => {
        const header = ['美工姓名', '除同款工作量', '首次同款工作量', '同款工作量', '总工作量']
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            exportedData.push([
              row.name,
              row.notSameCnt,
              row.firstSameCnt,
              row.sameCnt,
              row.cnt
            ])
          }
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '美工工作量汇总统计'
        })
      }).finally(() => {
        this.isExporting = false
      })
    },
    loadRevocationRateByFollower() {
      this.revocationRateByFollowerLoading = true
      newProductRegisterApi.queryArtDesignerDailyWorkCountStatics(this.formData.dateRange4Follower.dateRange[0], this.formData.dateRange4Follower.dateRange[1]).then(data => {
        this.revocationRateByFollower = data
      }).finally(() => {
        this.revocationRateByFollowerLoading = false
      })
    },
    exportRevocationRateByFollower() {
      this.isExporting = true
      newProductRegisterApi.queryArtDesignerDailyWorkCountStatics(this.formData.dateRange4Follower.dateRange[0], this.formData.dateRange4Follower.dateRange[1]).then(data => {
        const header = ['领取日期', '美工姓名', '除同款工作量', '首次同款工作量', '同款工作量', '总工作量']
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            exportedData.push([
              row.gmtDate,
              row.name,
              row.notSameCnt,
              row.firstSameCnt,
              row.sameCnt,
              row.cnt
            ])
          }
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '美工工作量每日统计'
        })
      }).finally(() => {
        this.isExporting = false
      })
    }
  }
}
</script>

<style scoped lang="scss">

.card_fitTitle {
  font-size: 14px;
  color: #999;
  padding-bottom: 10px;

}

.center {
  text-align: center;
}

.card-num {
  font-size: 24px;
  padding-bottom: 10px;
}

.card-unit {
  font-size: 12px;
}

.news {

  &__sep {
    margin: 0 15px;
  }

  &__content {
    color: #999;
  }

}

.card-txt {
  font-size: 14px;
}

.short-cut {
  text-align: center;
  font-size: 14px;
  margin-bottom: 15px;
  float: left;
  margin-right: 30px;
}

.short-cuts-content {
  overflow: hidden;
  box-sizing: border-box;
}

.short-icon {
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
}

.short-cuts-title {
  padding-bottom: 30px;
}

.todolist {
  padding: 50px 0 10px 0;
}


.todolist .el-row {
  padding-bottom: 15px;
}

.todo-title {
  padding-bottom: 30px;
  font-size: 18px;
  font-weight: bold;
}

.short-cuts-title {
  font-size: 18px;
  font-weight: bold;
}

.todo-block {
  text-align: center;
  display: inline-block;
  width: 120px;
  margin-bottom: 20px;
}

.todo-txt {
  font-size: 14px;
}

.todo-block .todo-num {
  font-size: 18px;
  padding-bottom: 10px;
}

.data-table {
  padding-bottom: 100px;
  overflow-x: auto;
  table-layout: fixed;
  white-space: nowrap;
}
</style>
